<template>
    <div>
        <div class="recommend-title">
            热销推荐
        </div>
        <ul class="recommend-list border-bottom">
            <li class="recommend-item" v-for="item in recommendList" :key='item.id'>
                <img :src="item.imgUrl">
                <div class="item-info">
                    <p class="title">{{item.title}}</p>
                    <p class="desc">{{item.desc}}</p>
                    <button class="info-btn">查看详情</button>
                </div>
            </li>
        </ul>
    </div>
</template>

<style lang="stylus">
@import "~styles/mixin.styl"
.recommend-title
    background:#eee
    margin-top :.2rem
    line-height :.8rem
    text-indent :.2rem
    text-align :left
.recommend-list
    display :block
    width:100%
    box-sizing :border-box
    padding-left :.2rem
    .recommend-item
        display :flex
        padding :10px 0
        img
            width :2rem
            height:2rem
        .item-info
            flex :1
            padding-left:.22rem
            min-width :0
            .title
                line-height :.44rem
                height :.44rem
                margin-top:.26rem
                font-size:.36rem
                text-align:left
                color:#212121
                ellipsis()
            .desc
                margin-top :.24rem
                line-height :.32rem
                font-size :.32rem
                text-align :left
                color:#616161
                ellipsis()
            .info-btn
                margin-top :.24rem
                line-height :.36rem
                padding :.05rem
                font-size :.32rem
                text-align :left
                color :#fff
                background :#ff8300
                float :left
                border-radius:.05rem

</style>

<script lang="text/ecmascript-6">
export default {
  name: 'HomeRecommend',
  props: {
    recommendList: Array
  }
}
</script>
